<template>
    <div class="city-manage">
        <!-- <video id="video" src="./font/输出.mp4" autoplay muted="muted" loop></video> -->
        <!-- 头部区域 -->
        <header>
            <!-- 项目标题 -->
            <p class="title-name">
                <span>城市管理大数据智慧平台</span>
            </p>
            <!-- 截止时间 -->
            <span class="deadline-box">
                <span>截至时间：</span>
                <span id="deadline">2020年9月25日</span>
            </span>
            <!-- 头部背景图 -->
            <div class="header-bg"></div>
            <!-- 头部底端光点 -->
            <div class="bottom-light"></div>
        </header>
        <!-- 主体内容 -->
        <section class="main-box">
            <div class="content-area">
                <div class="left-title-name">
                    <span>城市精细化建设</span>
                </div>
                <div class="right-title-name">
                    <span>城市管理指标</span>
                </div>
                <div class="content-area-info">
                    <div class="left-content-row">
                        <!-- 十四运建设 -->
                        <div class="border-box construction">
                            <div class="top-light-img"></div>
                            <div class="overflow-box">
                                <div class="block-title-name">
                                    <span>十四运建设</span>
                                </div>
                                <div class="con-switch-block">
                                    <div id="conSwitchLeft" class="con-switch-left switch-block-active" @click="switchTaskBlock(1)">市级任务：165个</div>
                                    <div id="conSwitchRight" class="con-switch-right switch-block-no" @click="switchTaskBlock(2)">区级任务：236个</div>
                                </div>
                                <div class="con-chart-box">
                                    <ul class="completion-status">
                                        <li>已完成：49个<span class='line-space'>/</span>30%</li>
                                        <li>未完成：116个<span class='line-space'>/</span>70%</li>
                                    </ul>
                                    <div id="conChart"></div>
                                </div>
                            </div>
                        </div>
                        <!-- 违建、整改 -->
                        <div class="rectification">
                            <div class="border-box non-conforming">
                                <div class="top-light-img"></div>
                                <div class="overflow-box">
                                    <div class="block-title-name">
                                        <div id="nonSwitchLeft" @click="switchNonBlock(1)" class="non-switch-left switch-block-active">拆 违</div>
                                        <div id="nonSwitchRight" @click="switchNonBlock(2)" class="non-switch-right switch-block-no">背街小巷</div>
                                    </div>
                                    <div class="non-chart-box">
                                        <ul class="dismantle-status">
                                            <li>计划拆违：<span>997</span>处</li>
                                            <li>已拆除/整改：<span>109</span>处</li>
                                        </ul>
                                        <div id="nonChart"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="border-box renovation">
                                <div class="top-light-img"></div>
                                <div class="overflow-box">
                                    <div class="block-title-name">
                                        <span>精细化整治提升：<span id="renovationNum">260条</span></span>
                                    </div>
                                    <ul class="completion-rate">
                                        <li>已完成：49条<span class='line-space'>/</span>30%</li>
                                        <li>未完成：116条<span class='line-space'>/</span>70%</li>
                                    </ul>
                                    <div id="renChart"></div>
                                </div>
                            </div>
                        </div>
                        <!-- 工作列表   -->
                        <div class="border-box work-list">
                            <div class="top-light-img"></div>
                            <div class="overflow-box">
                                <div class="block-title-name">
                                    <span>城市精细化管理工作</span>
                                </div>
                                <div class="table-head">
                                    <table>
                                        <tr>
                                            <td>工作事项</td>
                                            <td>任务量</td>
                                            <td>结束时间</td>
                                            <td>完成量</td>
                                            <td>完成率</td>
                                        </tr>
                                    </table>
                                </div>
                                <div id="tableBody" class="table-body">
                                    <div id="tableBodyBox">
                                        <table>
                                            <tr>
                                                <td>主城区道路机扫工作</td>
                                                <td>123</td>
                                                <td>2020年9月18日</td>
                                                <td>45</td>
                                                <td>34%</td>
                                            </tr>
                                            <tr style="color: #fda72b">
                                                <td>主城区道路机扫工作</td>
                                                <td>123</td>
                                                <td>2020年9月18日</td>
                                                <td>45</td>
                                                <td>34%</td>
                                            </tr>
                                            <tr>
                                                <td>主城区道路机扫工作</td>
                                                <td>123</td>
                                                <td>2020年9月18日</td>
                                                <td>45</td>
                                                <td>34%</td>
                                            </tr>
                                            <tr>
                                                <td>主城区道路机扫工作</td>
                                                <td>123</td>
                                                <td>2020年9月18日</td>
                                                <td>45</td>
                                                <td>34%</td>
                                            </tr>
                                            <tr>
                                                <td>主城区道路机扫工作</td>
                                                <td>123</td>
                                                <td>2020年9月18日</td>
                                                <td>45</td>
                                                <td>34%</td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div id="tableBodyBox1"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="center-content-row">
                        <!-- 指数统计 -->
                        <div class="border-box index-statistics">
                            <div class="top-light-img"></div>
                            <div class="top-border-block"></div>
                            <div class="bottom-light-img"></div>
                            <div class="overflow-box">
                                <ul class="total-area">
                                    <li class="over-area">
                                        <span class="area-name" @click="areaNameClick()">管辖总面积</span>
                                        <span id="areaNumber" class="area-number" @click="createDom()"></span>
                                        <span class="area-unit">km²</span>
                                    </li>
                                    <li class="core-area">
                                        <span class="area-name">核心管辖总面积</span>
                                        <span id="coreAreaNumber" class="area-number" @click="createDom1()"></span>
                                        <span class="area-unit">km²</span>
                                    </li>
                                </ul>
                                <div class="chart-area">
                                    <div id="myTotalArea"></div>
                                </div>
                                <p class="chart-name">各街办面积及综合发展指数统计</p>
                            </div>
                            <div class="panel-footer"></div>
                        </div>
                        <!-- 占比统计 -->
                        <div class="border-box proportion-statistics">
                            <div class="top-light-img"></div>
                            <div class="top-border-block"></div>
                            <div class="bottom-light-img"></div>
                            <div class="overflow-box">
                                <div class="prop-switch-block">
                                    <div id="propSwitchLeft" class="prop-switch-left prop-switch-active" @click="switchPropBlock(1)">道路数量：376 条</div>
                                    <div id="propSwitchCenter" class="prop-switch-center prop-switch-no" @click="switchPropBlock(2)">道路长度：1067 km</div>
                                    <div id="propSwitchRight" class="prop-switch-right prop-switch-no" @click="switchPropBlock(3)">道路面积：22 km²</div>
                                </div>
                                <div class="length-proportion">
                                    <div id="lengthProportion"></div>
                                </div>
                                <p class="chart-name">道路长度占比统计</p>
                            </div>
                            <div class="panel-footer"></div>
                        </div>
                        <!-- 网格数量 -->
                        <div class="border-box grid-number">
                            <div class="top-light-img"></div>
                            <div class="top-border-block"></div>
                            <div class="overflow-box">
                                <div class="bottom-light-img"></div>
                                <div class="grid-switch-block">
                                    <div id="gridSwitchLeft" class="grid-switch-left switch-block-active" @click="switchGridBlock(1)">基础网格数量：545个</div>
                                    <div id="gridSwitchRight" class="grid-switch-right switch-block-no" @click="switchGridBlock(2)">管理网格数量（巡检）：376个</div>
                                </div>
                                <div class="grid-proportion">
                                    <div id="gridChart"></div>
                                    <ul class="other-statistics">
                                        <li>小区<span class="space">/</span>124个<span class="space">/</span>34%</li>
                                        <li>医院<span class="space">/</span>124个<span class="space">/</span>34%</li>
                                        <li>学校<span class="space">/</span>124个<span class="space">/</span>34%</li>
                                        <li>学校<span class="space">/</span>124个<span class="space">/</span>34%</li>
                                        <li>学校<span class="space">/</span>124个<span class="space">/</span>34%</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="panel-footer"></div>
                        </div>
                    </div>
                    <div class="right-content-row">
                        <!-- 其他指标统计  要是有边框加上 border-box  class就行-->
                        <div class="border-box other-indicator">
                            <div class="bottom-light-img"></div>
                            <div class="overflow-box">
                                <li>
                                    <span class="strength">43.24 <span>%</span></span>
                                    <p>区域开发强度<img class="explain" src="../../assets/img/cityManage/explain.png" alt=""></p>
                                </li>
                                <li>
                                    <span class="density">12.45 <span>km / km²</span></span>
                                    <p>城市道路网密度<img class="explain" src="../../assets/img/cityManage/explain.png" alt=""></p>
                                </li>
                                <li>
                                    <span class="days">187 <span>天</span></span>
                                    <p>空气质量优良天数</p>
                                </li>
                            </div>
                        </div>
                        <!-- 各项指标列表 -->
                        <div class="border-box indicator-list">
                            <div class="top-light-img"></div>
                            <div class="overflow-box">
                                <table>
                                    <thead>
                                    <tr>
                                        <th></th>
                                        <th>序号</th>
                                        <th>指标<img class="explain" src="../../assets/img/cityManage/explain.png" alt=""></th>
                                        <th>指标值</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr class="green">
                                        <td class="icon-td" rowspan="2">
                                            <img src="../../assets/img/cityManage/icon/green.png" alt="绿化">
                                        </td>
                                        <td>1</td>
                                        <td>公园绿地服务半径覆盖率</td>
                                        <td>43.24%</td>
                                    </tr>
                                    <tr class="green">
                                        <td>2</td>
                                        <td>建成区绿化覆盖率</td>
                                        <td>43.24%</td>
                                    </tr>
                                    <tr class="yellow">
                                        <td class="icon-td" rowspan="4">
                                            <img src="../../assets/img/cityManage/icon/sanitation.png" alt="环卫">
                                        </td>
                                        <td>3</td>
                                        <td>公厕道路服务覆盖率</td>
                                        <td>43.24%</td>
                                    </tr>
                                    <tr class="yellow">
                                        <td>4</td>
                                        <td>道路机扫率</td>
                                        <td>43.24%</td>
                                    </tr>
                                    <tr class="yellow">
                                        <td>5</td>
                                        <td>垃圾分类覆盖率</td>
                                        <td>43.24%</td>
                                    </tr>
                                    <tr class="yellow">
                                        <td>6</td>
                                        <td>生活垃圾回收利用率</td>
                                        <td>43.24%</td>
                                    </tr>
                                    <tr class="peach">
                                        <td class="icon-td">
                                            <img src="../../assets/img/cityManage/icon/lamp.png" alt="亮化">
                                        </td>
                                        <td>7</td>
                                        <td>道路亮化覆盖率</td>
                                        <td>43.24%</td>
                                    </tr>
                                    <tr class="blue">
                                        <td class="icon-td">
                                            <img src="../../assets/img/cityManage/icon/density.png" alt="积水">
                                        </td>
                                        <td>8</td>
                                        <td>城市建成区积水内涝点密度</td>
                                        <td>43.24%</td>
                                    </tr>
                                    <tr class="red">
                                        <td class="icon-td">
                                            <img src="../../assets/img/cityManage/icon/heating.png" alt="供热">
                                        </td>
                                        <td>9</td>
                                        <td>供热用户单位</td>
                                        <td>43.24%</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!-- 历史案件及结案率柱状图 -->
                        <div class="border-box case-bar">
                            <div class="top-light-img"></div>
                            <div class="overflow-box">
                                <ul class="case-top-num">
                                    <li class="today-case">
                                        <span class="case-name">今日案件：</span>
                                        <span class="case-num">543</span>
                                        <span class="case-unit">件</span>
                                    </li>
                                    <li class="closed-case">
                                        <span class="closing-rate">
                                            <span class="case-name">结案率：</span>
                                            <span class="case-num">45</span>
                                            <span class="case-unit">%</span>
                                            <span class="last-date">9月14日-9月29日</span>
                                        </span>
                                        <p>应结：<span>1243件</span><span class="space">/</span>实结：<span>243件</span></p>
                                    </li>
                                </ul>
                                <div id="caseChart"></div>
                                <p class="chart-name">历史案件及结案率</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <div class="el-dialog__wrapper">
            <div class="el-dialog">
                <div class="el-dialog__header">
                    <div class="top-border-block"></div>
                    <div class="top-light-img"></div>
                    <div class="toolbox">
                        <span class="screen-dialog">
                            <img id="screen" src="../../assets/img/cityManage/icon/screen.png" alt="全屏" @click="isShowFullDialog()">
                            <img id="outScreen" src="../../assets/img/cityManage/icon/out-screen.png" alt="退出全屏" @click="isShowFullDialog()">
                        </span>
                        <span class="close-dialog">
                            <img src="../../assets/img/cityManage/icon/close.png" alt="关闭" @click="closeDialog()">
                        </span>
                    </div>
                    <span class="dialog-name">高新区道路数量：<span class="orange-num">376 </span> 条</span>
                </div>
                <div class="el-dialog__body">
                    <div id="dialogContent" class="dialog-content"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "CityManage",
        data () {
            return {
                // 是否全屏
                isFullScreen: false,
            }
        },
        methods: {
            /**
             * Description:播放MP4文件
             * Author:ybt
             * Date:2020/12/17
             */
            play() {
                let video = document.getElementById("video");
                video.play();
            },
            /**
             * Description:关闭弹出层
             * Author:ybt
             * Date:2020/12/17
             */
            closeDialog(){
                $('.el-dialog__wrapper').removeClass('animate__zoomIn');
                $('.el-dialog__wrapper').addClass('animate__animated animate__zoomOut');
                setTimeout( () => {
                    $('.el-dialog__wrapper').hide();
                }, 400);
                if (this.isFullScreen) {
                    // 是否全屏显示弹出层
                    this.isShowFullDialog();
                }
            },
            /**
             * Description:是否全屏显示弹出层
             * Author:ybt
             * Date:2020/12/17
             */
            isShowFullDialog(){
                let el = document.getElementsByClassName('el-dialog')[0];
                let rfs =
                    el.requestFullScreen ||
                    el.webkitRequestFullScreen ||
                    el.mozRequestFullScreen ||
                    el.msRequestFullscreen;
                if (!this.isFullScreen) {
                    if (typeof rfs != 'undefined' && rfs) {
                        rfs.call(el)
                    }
                    this.isFullScreen = true;
                    $('#screen').css('display', 'none');
                    $('#outScreen').css('display', 'block');
                } else if (this.isFullScreen) {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    }
                    this.isFullScreen = false;
                    $('#screen').css('display', 'block');
                    $('#outScreen').css('display', 'none');
                }
            },
            /**
             * Description:实现切换任务块
             * Author:ybt
             * Date:2020/12/17
             */
            switchTaskBlock (type) {
                if (type === 1) {
                    $('#conSwitchLeft').removeClass('switch-block-no').addClass('switch-block-active');
                    $('#conSwitchRight').removeClass('switch-block-active').addClass('switch-block-no');
                } else if (type === 2) {
                    $('#conSwitchLeft').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#conSwitchRight').removeClass('switch-block-no').addClass('switch-block-active');
                }
            },
            /**
             * Description:初始化十四运建设任务块chart图
             * Author:ybt
             * Date:2020/12/17
             */
            initConChart(){
                let myChart = this.$echarts.init(document.getElementById('conChart'));
                let option = {
                    grid: {
                        left: '0%',
                        right: '0%',
                        top: '20%',
                        bottom: '0%',
                        containLabel: true
                    },
                    legend: {
                        right: -5,
                        data:['任务量', '进度'],
                        textStyle: {
                            color: '#fff'
                        },
                        itemWidth: 15

                    },
                    xAxis: {
                        type: 'category',
                        data: ['统筹', '场馆', '设施', '五化', '生态', '交通', '环境', '应急', '文明'],
                        // 坐标轴刻度标签
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        // 坐标区域分割线
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                color: '#4b8aaa'
                            }
                        },
                        // 坐标轴轴线
                        axisLine: {
                            lineStyle: {
                                color: '#1f98e5'
                            }
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            // 坐标轴刻度标签
                            axisLabel: {
                                textStyle: {
                                    color: '#64cefe'
                                },
                                fontSize: 10,
                                verticalAlign: 'center'
                            },
                            // 坐标区域分割线
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dashed',
                                    color: '#4b8aaa'
                                }
                            },
                            // 坐标轴轴线
                            axisLine: {
                                lineStyle: {
                                    color: '#1f98e5'
                                }
                            }
                        },
                        {
                            type: 'value',
                            min: 10,
                            max: 60,
                            // 坐标轴刻度标签
                            axisLabel: {
                                textStyle: {
                                    color: '#64cefe'
                                },
                                formatter: '{value} %',
                                fontSize: 10
                            },
                            // 坐标区域分割线
                            splitLine: {
                                show: false,
                            },
                            axisTick: {
                                // 是否显示刻度线
                                show: false
                            },
                            // 坐标轴轴线
                            axisLine: {
                                lineStyle: {
                                    type: 'dashed',
                                    color: '#1f98e5'
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            name: '任务量',
                            color: '#f7a542',
                            data: [200, 260, 300, 235, 180, 250, 250, 180, 235],
                            type: 'bar',
                            barWidth: '23px',
                            itemStyle: {
                                normal: {
                                    barBorderRadius: [9, 9, 0, 0]
                                }
                            }
                        },
                        {
                            name: '进度',
                            type: 'line',
                            data: [130, 100, 170, 25, 130, 100, 130, 60, 170],
                            symbol: 'circle',
                            symbolSize: 7,
                            lineStyle: {
                                color: '#da4443',
                                width: 2,
                                borderColor: '#da4443',
                            }
                        }
                    ]
                };
                //使用制定的配置项和数据显示图表
                myChart.setOption(option);
                window.addEventListener('resize',function () {
                    myChart.resize()
                })
            },
            /**
             * Description:实现切换违拆、小巷块
             * Author:ybt
             * Date:2020/12/17
             */
            switchNonBlock (type) {
                if (type === 1) {
                    $('#nonSwitchLeft').removeClass('switch-block-no').addClass('switch-block-active');
                    $('#nonSwitchRight').removeClass('switch-block-active').addClass('switch-block-no');
                } else if (type === 2) {
                    $('#nonSwitchLeft').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#nonSwitchRight').removeClass('switch-block-no').addClass('switch-block-active');
                }
            },
            /**
             * Description:初始化拆违chart图
             * Author:ybt
             * Date:2020/12/17
             */
            initNonChart(){
                let myChart = this.$echarts.init(document.getElementById('nonChart'));
                let data = {
                    value: 50,
                    name: '拆违率'
                };
                let option = {
                    title: {
                        text: '{num|' + data.value + '}{key|%}',
                        subtext: data.name,
                        x: '49%',
                        y: '46%',
                        textAlign: 'center',
                        textStyle: {
                            rich: {
                                num: {
                                    color: '#fda72b',
                                    fontSize: 18,
                                },
                                key: {
                                    color: '#fda72b',
                                    fontSize: 18,
                                }
                            }

                        },
                        subtextStyle: {
                            lineHeight: 30,
                            fontSize: 15
                        }
                    },
                    series: [{ // 主圆环
                        name: data.name,
                        type: 'pie',
                        radius: ['60%', '100%'],
                        startAngle: 225,
                        color: [{
                            type: 'linear',
                            x: 1,
                            y: 0,
                            x2: 0,
                            y2: 0,
                            colorStops: [{
                                offset: 0,
                                color: '#ccb135'
                            }, {
                                offset: 1,
                                color: '#c48126'
                            }]
                        }, 'transparent'],
                        hoverAnimation: false,
                        legendHoverLink: false,
                        z: 10,
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: [{
                            value: 75 * data.value / 100
                        }, {
                            value: 100 - (75 * data.value / 100)
                        }]
                    }, { // 背景圆环
                        type: 'pie',
                        radius: ['60%', '100%'],
                        silent: true,
                        startAngle: 225,
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        z: 5,
                        data: [{
                            value: 75,
                            itemStyle: {
                                color: '#00184a'
                            }
                        }, {
                            value: 25,
                            itemStyle: {
                                color: 'transparent'
                            }
                        }]
                    }]
                };
                //使用制定的配置项和数据显示图表
                myChart.setOption(option);
                window.addEventListener('resize',function () {
                    myChart.resize()
                })
            },
            /**
             * Description: 初始化整治提升chart图
             * Author:ybt
             * Date:2020/12/17
             */
            initRenChart () {
                let myChart = this.$echarts.init(document.getElementById('renChart'));
                let option = {
                    grid: {
                        left: '2%',
                        right: '5%',
                        top: '15%',
                        bottom: '2%',
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    legend: {
                        data: ['总量', '完成量'],
                        right: '5%',
                        textStyle: {
                            color: '#fff'
                        },
                        itemWidth: 15,
                    },
                    xAxis: {
                        type: 'category',
                        data: ['市政部', '环卫部', '执法部', '绿化部', '亮化部'],
                        axisPointer: {
                            type: 'shadow'
                        },
                        // 坐标区域分割线
                        splitLine: {
                            show: false
                        },
                        // 坐标轴刻度标签
                        axisLabel: {
                            textStyle: {
                                color: '#fff'
                            },
                            fontSize: 13
                        },
                        // 坐标轴轴线
                        axisLine: {
                            lineStyle: {
                                color: '#113986',
                                width: 3
                            }
                        },
                        // 坐标轴刻度
                        axisTick: {
                            show: false
                        }
                    },
                    yAxis: {
                        type: 'value',
                        interval: 200,
                        // 坐标区域分割线
                        splitLine: {
                            show: false
                        },
                        // 坐标轴刻度标签
                        axisLabel: {
                            textStyle: {
                                color: '#ceced5'
                            },
                            fontSize: 12
                        },
                        // 坐标轴轴线
                        axisLine: {
                            lineStyle: {
                                color: '#113986',
                                width: 3
                            }
                        },
                        // 坐标轴刻度
                        axisTick: {
                            show: false
                        }
                    },
                    series: [
                        {
                            name: '总量',
                            type: 'bar',
                            data: [1100, 1200, 800, 1100, 1100],
                            itemStyle: {
                                color: 'rgba(7, 71, 108, 0.8)',
                                borderColor: '#0192b4'
                            },
                            barCategoryGap: '40%'
                        },
                        {
                            name: '完成量',
                            type: 'bar',
                            data: [900, 900, 600, 900, 900],
                            itemStyle: {
                                color: 'rgba(33, 58, 114, 0.8)',
                                borderColor: '#455993'
                            }
                        }
                    ]
                };
                //使用制定的配置项和数据显示图表
                myChart.setOption(option);
                window.addEventListener('resize',function () {
                    myChart.resize()
                })
            },
            /**
             * Description:城市精细化管理工作列表滚动效果
             * Author:ybt
             * Date:2020/12/17
             */
            listScrolling(){
                let speed = 60;
                document.getElementById("tableBodyBox1").innerHTML = document.getElementById("tableBodyBox").innerHTML;
                function Marquee() {
                    if (document.getElementById("tableBodyBox1").offsetHeight - document.getElementById("tableBody").scrollTop <= 0) {
                        document.getElementById("tableBody").scrollTop -= document.getElementById("tableBodyBox").offsetHeight;
                    } else {
                        document.getElementById("tableBody").scrollTop++;
                    }
                }
                let MyMar = setInterval(Marquee, speed);
                document.getElementById("tableBody").onmouseover = function() {
                    clearInterval(MyMar);
                };
                document.getElementById("tableBody").onmouseout = function() {
                    MyMar = setInterval(Marquee, speed);
                };
            },
            /**
             * Description:管辖总面积点击事件
             * Author:ybt
             * Date:2020/12/17
             */
            areaNameClick(){
                $('.el-dialog__wrapper').removeClass('animate__zoomOut');
                $('.el-dialog__wrapper').addClass('animate__animated animate__zoomIn');
                $('.el-dialog__wrapper').show();
                $('.el-dialog__wrapper').css('opacity', '1');
                // 高德地图初始化
                this.initMap();
            },
            /**
             * Description:高德地图初始化
             * Author:ybt
             * Date:2020/12/17
             */
            initMap() {
                let GDMap = new AMap.Map("dialogContent", {
                    mapStyle: "amap://styles/6f8a9c431c03a423de43182d250f1a75",
                    zoom: 14,
                    viewMode: "3D",
                    center: [108.976877, 34.222629],
                    features: ["bg", "road", "building"],
                    resizeEnable: true
                });
                GDMap.setFitView();// 执行定位
            },
            /**
             * Description:创建渲染数字DOM元素
             * Author:ybt
             * Date:2020/12/17
             */
            createDom(){
                let orderNum = ["0", "0", "0", "0"];
                let str = '';
                for (let i = 0; i < orderNum.length; i++) {
                    if (!isNaN(orderNum[i])) {
                        str += '<li class="number-item">' +
                            '<span><i class="numberItem">0123456789</i></span>' +
                            '</li>'
                    } else {
                        str += '<li>' +
                            '<span class="comma">' + orderNum[i] +'</span>' +
                            '</li>'
                    }
                }
                document.getElementById("areaNumber").innerHTML = str;
                setTimeout( () => {
                    this.initDigitalScroll(1079);
                }, 400)
            },
            /**
             * Description:数字格式化处理
             * Author:ybt
             * Date:2020/12/17
             */
            initDigitalScroll(num) {
                let orderNum = null;
                num = num.toString();
                // 把数字变成字符串
                if (num.length < 4) {
                    num = "0" + num; // 如未满四位数，添加"0"补位
                    this.initDigitalScroll(num); // 递归添加"0"补位
                } else if (num.length === 4) {
                    orderNum = num.split(""); // 将其便变成数据，渲染至滚动数组
                }
                this.setNumberTransform(orderNum);
            },
            /**
             * Description:结合CSS 对数字字符进行滚动,显示数量
             * Author:ybt
             * Date:2020/12/17
             */
            setNumberTransform(orderNum) {
                const numberItems = document.getElementsByClassName("numberItem"); // 计算元素数量
                const numberArr = orderNum.filter(item => !isNaN(item));
                for (let index = 0; index < numberItems.length; index++) {
                    const elem = numberItems[index];
                    elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`;
                }
            },
            /**
             * Description:创建渲染数字DOM元素
             * Author:ybt
             * Date:2020/12/17
             */
            createDom1(){
                let orderNum = ["0", "0", "0"];
                let str = '';
                for (let i = 0; i < orderNum.length; i++) {
                    if (!isNaN(orderNum[i])) {
                        str += '<li class="number-item">' +
                            '<span><i class="numberItem1">0123456789</i></span>' +
                            '</li>'
                    } else {
                        str += '<li>' +
                            '<span class="comma">' + orderNum[i] +'</span>' +
                            '</li>'
                    }
                }
                document.getElementById("coreAreaNumber").innerHTML = str;
                setTimeout(() => {
                    this.initDigitalScroll1(712);
                }, 400)
            },
            /**
             * Description:数字格式化处理
             * Author:ybt
             * Date:2020/12/17
             */
            initDigitalScroll1(num) {
                let orderNum = null;
                num = num.toString();
                // 把数字变成字符串
                if (num.length < 3) {
                    num = "0" + num; // 如未满四位数，添加"0"补位
                    this.initDigitalScroll1(num); // 递归添加"0"补位
                } else if (num.length === 3) {
                    orderNum = num.split(""); // 将其便变成数据，渲染至滚动数组
                }
                this.setNumberTransform1(orderNum);
            },
            /**
             * Description:结合CSS 对数字字符进行滚动,显示数量
             * Author:ybt
             * Date:2020/12/17
             */
            setNumberTransform1(orderNum) {
                const numberItems = document.getElementsByClassName("numberItem1"); // 计算元素数量
                const numberArr = orderNum.filter(item => !isNaN(item));
                for (let index = 0; index < numberItems.length; index++) {
                    const elem = numberItems[index];
                    elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`;
                }
            },
            /**
             * Description:初始化“各街办面积及综合发展指数统计”图
             * Author:ybt
             * Date:2020/12/17
             */
            initMultipleChart() {
                //初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("myTotalArea"));
                let option = {
                    grid: {
                        top: "8%",
                        bottom: "12%", //也可设置left和right设置距离来控制图表的大小
                        left: "6%",
                        right: "2%"
                    },
                    xAxis: {
                        data: ["直管", "丈八", "鱼化", "兴隆", "直管", "丈八", "鱼化", "兴隆", "直管", "丈八"],
                        axisTick: {
                            show: false //隐藏X轴刻度
                        },
                        boundaryGap: false,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#8de4ea", //X轴文字颜色
                                fontSize: 13,
                            }
                        }

                    },
                    yAxis: {
                        type: "value",
                        axisTick: {
                            show: false //隐藏X轴刻度
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#2ca3df",
                                fontWeight: 'bold',
                                fontSize: 15,
                            }
                        },
                        min: 0,
                        max: 250,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#4b8aaa'
                            }
                        },
                        axisLine: {
                            show: false
                        }
                    },
                    series: {
                        type: "line",
                        smooth: true, //平滑曲线显示
                        symbolSize: 8, //标记的大小
                        itemStyle: {
                            //折线拐点标志的样式
                            color: "#f7a530"
                        },
                        lineStyle: {
                            color: "#f7a530"
                        },
                        areaStyle: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(253, 201, 43, 0.4)'
                            },
                                {
                                    offset: 1,
                                    color: 'rgba(103, 79, 38, 0)'
                                }])
                        },
                        label: {
                            show: true,
                            textStyle: {
                                fontSize: 14,
                                color: "#f7a530"
                            },
                            formatter: (params) => {
                                if (params.dataIndex == 5) {
                                    return params.value;
                                } else {
                                    return "";
                                }
                            }
                        },
                        data: [145, 180, 235, 123, 168, 157, 136, 210, 100, 120]
                    }
                };
                //使用制定的配置项和数据显示图表
                myChart.setOption(option);
                window.addEventListener("resize", function() {
                    myChart.resize();
                });
            },
            /**
             * Description:实现切换道路长度块
             * Author:ybt
             * Date:2020/12/17
             */
            switchPropBlock (type) {
                if (type === 1) {
                    $('#propSwitchLeft').removeClass('prop-switch-no').addClass('prop-switch-active');
                    $('#propSwitchCenter').removeClass('prop-switch-active').addClass('prop-switch-no');
                    $('#propSwitchRight').removeClass('prop-switch-active').addClass('prop-switch-no');
                } else if (type === 2) {
                    $('#propSwitchLeft').removeClass('prop-switch-active').addClass('prop-switch-no');
                    $('#propSwitchCenter').removeClass('prop-switch-no').addClass('prop-switch-active');
                    $('#propSwitchRight').removeClass('prop-switch-active').addClass('prop-switch-no');
                } else if (type === 3) {
                    $('#propSwitchLeft').removeClass('prop-switch-active').addClass('prop-switch-no');
                    $('#propSwitchCenter').removeClass('prop-switch-active').addClass('prop-switch-no');
                    $('#propSwitchRight').removeClass('prop-switch-no').addClass('prop-switch-active');
                }
            },
            /**
             * Description:初始化“道路长度占比统计”图
             * Author:ybt
             * Date:2020/12/17
             */
            initProportionChart() {
                let roadImage = require('../../assets/img/cityManage/road-chart.png');
                //初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("lengthProportion"));
                let roadWay = [{
                    name: "主干道",
                    value: 25
                }, {
                    name: "次干道",
                    value: 10
                }, {
                    name: "支路",
                    value: 20
                }, {
                    name: "支路",
                    value: 40
                }, {
                    name: "主干道",
                    value: 40
                }];

                let data = [];
                let color = ["#da4443", "#fec542", "#ffeed4", "#66ac35", "#00ada7"];
                for (let i = 0; i < roadWay.length; i++) {
                    data.push({
                        value: roadWay[i].value,
                        name: roadWay[i].name,
                        itemStyle: {
                            normal: {
                                color: color[i],
                                borderWidth: 7,
                                // shadowBlur: 20,
                                borderColor: color[i],
                                shadowColor: color[i]
                            }
                        }
                    }, {
                        value: 5,
                        name: "",
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                },
                                color: "rgba(0, 0, 0, 0)",
                                borderColor: "rgba(0, 0, 0, 0)",
                                borderWidth: 0
                            }
                        }
                    });
                }
                let seriesOption = [{
                    name: "",
                    type: "pie",
                    clockWise: false,
                    radius: ['87%', '92%'],
                    hoverAnimation: false,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: "outside",
                                fontSize: 14,
                                fontWeight: 'bold',
                                formatter: function(params) {
                                    let total = 0;
                                    for (let i = 0; i < roadWay.length; i++) {
                                        total += roadWay[i].value;
                                    }
                                    let percent = ((params.value / total) * 100).toFixed(0);
                                    if (params.name !== "") {
                                        return params.name + "：" + params.value + "km" + "\n" + '\n' + "占比：" + percent + "%";
                                    } else {
                                        return "";
                                    }
                                }
                            },
                            labelLine: {
                                length: 0,
                                length2: 100,
                                show: true,
                            }
                        }
                    },
                    data: data
                }];
                let option = {
                    color: color,
                    graphic: {
                        elements: [{
                            type: "image",
                            z: 3,
                            style: {
                                image: roadImage,
                                width: 160,
                                height: 160
                            },
                            left: "center",
                            top: "center",
                            position: [100, 100]
                        }]
                    },
                    series: seriesOption
                };
                //使用制定的配置项和数据显示图表
                myChart.setOption(option);
                window.addEventListener("resize", function() {
                    myChart.resize();
                });
            },
            /**
             * Description:实现切换网格数量块
             * Author:ybt
             * Date:2020/12/17
             */
            switchGridBlock (type) {
                if (type === 1) {
                    $('#gridSwitchLeft').removeClass('switch-block-no').addClass('switch-block-active');
                    $('#gridSwitchRight').removeClass('switch-block-active').addClass('switch-block-no');
                } else if (type === 2) {
                    $('#gridSwitchLeft').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#gridSwitchRight').removeClass('switch-block-no').addClass('switch-block-active');
                }
            },
            /**
             * Description:初始化“基础网格数量”统计图
             * Author:ybt
             * Date:2020/12/17
             */
            initGridChart() {
                let colorIndex = 0;
                //初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("gridChart"));
                let option = {
                    grid: {
                        left: "5%",
                        right: "5%",
                        bottom: "-10%",
                        top: "10%",
                        containLabel: true
                    },
                    xAxis: {
                        show: false,
                        type: "value"
                    },
                    yAxis: [{
                        type: "category",
                        inverse: true,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: () => {
                                    if (colorIndex === 5) {
                                        colorIndex = 0;
                                    }
                                    colorIndex ++;
                                    let colors = ['#ffa529', '#da4443', '#00ada7', '#0750ac', '#73ad00'];
                                    return colors[colorIndex - 1]
                                }, //每个数据的颜色
                                fontWeight: "bold",
                                fontSize: 14
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        data: ["一级网络 / 124个 / 34%", "二级网络 / 256个 / 53%", "三级网络 / 187个 / 21%", "四级网络 / 187个 / 21%", "五级网络 / 187个 / 21%"]
                    }],
                    series: [{
                        type: "bar",
                        zlevel: 1,
                        itemStyle: {
                            normal: {
                                color: (params) => {
                                    let colors = ['#ffa529', '#da4443', '#00ada7', '#0750ac', '#73ad00']
                                    return colors[params.dataIndex]
                                }, //每个数据的颜色
                                barBorderRadius: [0, 5, 5, 0]
                            }
                        },
                        barCategoryGap: 40,
                        barWidth: 10,
                        data: [10000000, 30000000, 15000000, 15000000, 15000000]
                    },
                        {
                            type: "bar",
                            barWidth: 10,
                            barCategoryGap: 40,
                            barGap: "-100%",
                            data: [50000000, 50000000, 50000000, 50000000, 50000000],
                            itemStyle: {
                                normal: {
                                    color: "#213973",
                                    barBorderRadius: [0, 5, 5, 0]
                                }
                            }
                        }]
                };
                //使用制定的配置项和数据显示图表
                myChart.setOption(option);
                window.addEventListener("resize", function() {
                    myChart.resize();
                });
            },
            /**
             * Description:初始化历史案件及结案率chart图
             * Author:ybt
             * Date:2020/12/17
             */
            initCaseChart(){
                //初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("caseChart"));
                let option = {
                    grid: {
                        left: "4%",
                        right: "3%",
                        bottom: "12%",
                        top: "10%",
                        containLabel: true
                    },
                    legend: {
                        data: ['案件量', '结案率'],
                        textStyle: {
                            color: '#fff'
                        },
                        bottom: 8,
                        right: 10,
                        itemWidth: 12,
                        itemHeight: 12,
                    },
                    xAxis: {
                        type: 'category',
                        data: ['20/07 02周', '20/07 03周', '20/07 04周', '20/08 01周', '20/08 02周', '20/08 03周', '20/08 04周', '20/09 01周', '20/09 02周', '20/09 03周', '20/09 04周'],
                        // 坐标轴刻度标签
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#00dafe',
                                fontSize: 11,
                            },
                            formatter:function(value) {
                                let ret = "";//拼接加\n返回的类目项
                                let maxLength = 5;//每项显示文字个数
                                let valLength = value.length;//X轴类目项的文字个数
                                let rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                                if (rowN > 1)//如果类目项的文字大于3,
                                {
                                    for (let i = 0; i < rowN; i++) {
                                        let temp = "";//每次截取的字符串
                                        let start = i * maxLength;//开始截取的位置
                                        let end = start + maxLength;//结束截取的位置
                                        //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                                        temp = value.substring(start, end) + "\n";
                                        ret += temp; //凭借最终的字符串
                                    }
                                    return ret;
                                }
                                else {
                                    return value;
                                }
                            }
                        },
                        // 坐标区域分割线
                        splitLine: {
                            show: false,
                        },
                        // 坐标轴轴线
                        axisLine: {
                            lineStyle: {
                                color: '#1f98e5'
                            }
                        },
                        axisTick: {
                            show: false //隐藏X轴刻度
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            max: 300,
                            // 坐标轴刻度标签
                            axisLabel: {
                                textStyle: {
                                    color: '#64cefe'
                                },
                                fontSize: 10,
                                verticalAlign: 'center'
                            },
                            // 坐标区域分割线
                            splitLine: {
                                show: false
                            },
                            // 坐标轴轴线
                            axisLine: {
                                lineStyle: {
                                    color: '#1f98e5'
                                }
                            }
                        },
                        {
                            type: 'value',
                            min: 0,
                            max: 60,
                            interval: 10,
                            splitLine: {
                                show: false
                            },
                            axisLabel: {
                                formatter: '{value} %',
                                color: '#64cefe',
                                fontSize: 10
                            },
                            // 坐标轴轴线
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false //隐藏X轴刻度
                            }
                        }
                    ],
                    series: [
                        { // 背景色
                            type: 'pictorialBar',
                            stack: '总量',
                            symbol: 'fixed',
                            symbolSize: [20, 4],
                            symbolMargin: 4,
                            symbolRepeat: 'repeat',
                            symbolBoundingData: 300,
                            z: -10,
                            data: [300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300],
                            itemStyle: {
                                normal: {
                                    color: 'rgba(28,124,198, 0.6)'
                                }
                            }
                        },
                        { // 替代颜色
                            type: 'pictorialBar',
                            name: '案件量',
                            symbol: 'fixed',
                            stack: '总量',
                            symbolSize: [20, 4],
                            symbolMargin: 4,
                            symbolRepeat: 'repeat',
                            barCategoryGap: '40%',
                            z: -1,
                            data: [200, 100, 245, 80, 200, 100, 245, 80, 200, 100, 245],
                            itemStyle:{
                                normal: {
                                    barBorderRadius: [10, 20, 30 ,40],
                                    color: '#00ebfe'
                                }
                            }
                        },
                        { // 替代颜色
                            type: 'pictorialBar',
                            name: '结案率',
                            symbol: 'fixed',
                            stack: '总量',
                            symbolSize: [20, 4],
                            symbolMargin: 4,
                            symbolRepeat: 'repeat',
                            barCategoryGap: '40%',
                            z: -1,
                            data: [150, 60, 160, 45, 150, 60, 160, 45, 150, 60, 160],
                            itemStyle:{
                                normal: {
                                    barBorderRadius: [10, 20, 30 ,40],
                                    color: '#f76009'
                                }
                            }
                        }
                    ]
                };
                //使用制定的配置项和数据显示图表
                myChart.setOption(option);
                window.addEventListener("resize", function() {
                    myChart.resize();
                });
            },
        },
        mounted(){
            $('#screen').css('display', 'block');
            $('#outScreen').css('display', 'none');
            $('.el-dialog__wrapper').hide();
            // 初始化十四运建设任务块chart图
            this.initConChart();
            // 初始化拆违chart图
            this.initNonChart();
            // 初始化整治提升chart图
            this.initRenChart();
            // 城市精细化管理工作列表滚动效果
            this.listScrolling();
            // 数字滚动
            this.createDom();
            // 数字滚动
            this.createDom1();
            // 初始化“各街办面积及综合发展指数统计”图
            this.initMultipleChart();
            // 初始化“道路长度占比统计”图
            this.initProportionChart();
            // 初始化“基础网格数量”统计图
            this.initGridChart();
            // 初始化历史案件及结案率chart图
            this.initCaseChart();
        }
    }
</script>

<style lang="less">
    .city-manage{
        display: flex;
        flex-direction: column;
        // background: url(../../assets/img/cityManage/bg.jpg) no-repeat top center;
        // background-size: 100% 100%;
        background-color: #080923;
        line-height: 1.15;
        position: relative;
        overflow-x: hidden;
        cursor: default;
        user-select: none;
        #video{
            width: 24rem;
            height: 13.5rem;
            z-index: -9999;
            position: absolute;
            top: 0;
            left: 0;
        }
        // 弹出层
        .el-dialog__wrapper{
            position: absolute;
            top: 0;
            left: 0;
            width: 24rem;
            height: 13.5rem;
            z-index: 9999;
            opacity: 0;
            background: rgba(0, 0, 0, 0.9);
            display: flex;
            justify-content: center;
            align-items: center;
            user-select: none;
            .el-dialog{
                width: 14.3125rem;
                height: 8.75rem; // 700px
                border: 2px solid #084292;
                background: rgba(0, 0, 0, 0.5);
                display: flex;
                flex-direction: column;
                .el-dialog__header{
                    position: relative;
                    border-bottom: 2px solid #084292;
                    height: 1.225rem;
                    line-height: 1.225rem;
                    padding: 0 0.25rem;
                    .top-border-block{
                        position: absolute;
                        left: calc(50% - 0.9rem);
                        top: -0.0375rem;
                        width: 1.8125rem;
                        height: 0.175rem;
                        background: url(../../assets/img/cityManage/border-block.png) no-repeat;
                        background-size: 100% 100%;
                    }
                    .top-light-img{
                        position: absolute;
                        top: 0;
                        left: calc(50% - 3.5rem);
                        width: 7rem;
                        height: 0.9625rem;
                        background: url(../../assets/img/cityManage/light1.png) no-repeat;
                        background-size: 100% 100%;
                    }
                    .toolbox{
                        position: absolute;
                        top: 0;
                        right: 0;
                        display: flex;
                        flex-direction: row;
                        .screen-dialog{
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: 0.375rem;
                            height: 0.375rem;
                            background-color: #093e8a;
                            margin-right: 0.0375rem;
                            cursor: pointer;
                            img{
                                width: 0.25rem;
                                height: 0.25rem;
                            }
                            &:hover{
                                background-color: #0981e0;
                            }
                        }
                        .close-dialog{
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: 0.375rem;
                            height: 0.375rem;
                            background-color: #093e8a;
                            cursor: pointer;
                            img{
                                width: 0.3rem;
                                height: 0.3rem;
                            }
                            &:hover{
                                background-color: #0981e0;
                            }
                        }
                    }
                    .dialog-name{
                        color: #fff;
                        font-size: 0.3rem;
                        .orange-num{
                            color: #ffa529 !important;
                            font-size: 0.425rem !important;
                        }
                    }
                }
                .el-dialog__body{
                    flex: 1;
                    .dialog-content{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
        /* 头部样式 */
        header {
            height: 1.5625rem;
            padding-top: 0.4375rem;
            position: relative;
            z-index: 99;
            .title-name{
                height: 1.125rem;
                line-height: 1.125rem;
                text-align: center;
                span {
                    font-size: 0.7125rem;
                    /* 引入外部字体样式 */
                    font-family: 'MF-FangHei';
                    background: linear-gradient(to right, #0178f7, #00ebfe, #00ebfe, #00a9ff);
                    -webkit-background-clip: text;
                    color: transparent;
                }
            }
            .deadline-box{
                position: absolute;
                left: 0.5rem;
                top: 0.4rem;
                color:#d5d5d9;
                font-family: 'FZLTZH_GBK';
                font-size: 0.1875rem;
            }
            .header-bg{
                position: absolute;
                bottom: 0;
                width: 100%;
                height: 0.7375rem;
                background: url(../../assets/img/cityManage/header-border.png) no-repeat;
                background-size: 100% 100%;
            }
            .bottom-light{
                position: absolute;
                bottom: -0.8125rem;
                left: calc(50% - 4.7875rem);
                width: 9.5875rem;
                height: 1.6625rem;
                background: url(../../assets/img/cityManage/big-light.png) no-repeat;
                background-size: 100% 100%;
            }
        }

        /* 主体内容样式 */
        .main-box{
            display: flex;
            flex: 1;
            padding: 0.1875rem 0.2875rem;
            font-family: 'FZLTZH_GBK';
            background-color: rgba(8, 9, 35, 0.7);
            .content-area{
                display: flex;
                flex: 1;
                position: relative;
                .left-title-name{
                    position: absolute;
                    left: 0;
                    top: -0.975rem;
                    width: 7.15rem;
                    height: 0.975rem;
                    background: url(../../assets/img/cityManage/left-title-img.png) no-repeat;
                    background-size: 100% 100%;
                    text-align: left;
                    color: #fff;
                    font-size: 0.2625rem;
                    span{
                        position: absolute;
                        bottom: 0.1375rem;
                        left: 0.175rem;
                    }
                }
                .right-title-name{
                    position: absolute;
                    right: 0;
                    top: -0.975rem;
                    width: 7.15rem;
                    height: 0.975rem;
                    background: url(../../assets/img/cityManage/right-title-img.png) no-repeat;
                    background-size: 100% 100%;
                    text-align: right;
                    color: #fff;
                    font-size: 0.2625rem;
                    span{
                        position: absolute;
                        bottom: 0.1375rem;
                        right: 0.225rem;
                    }
                }
            }
            .content-area-info{
                display: flex;
                flex-direction: row;
                flex: 1;
                /* 主体内容公共样式——开始 */
                .border-box{
                    border: 1px solid #18397b;
                    position: relative;
                    // background: rgba(8, 9, 35, 0.8);
                    .top-light-img{
                        position: absolute;
                        top: 0;
                    }
                    .overflow-box{
                        position: relative;
                        width: 100%;
                        height: 100%;
                        overflow: hidden;
                        display: flex;
                        flex-direction: column;
                        .block-title-name{
                            height: 0.7rem;
                            border-bottom: 1px solid #18397b;
                            font-size: 0.2325rem;
                        }
                        /* 选中的切换块样式 */
                        .switch-block-active{
                            font-size: 0.2325rem;
                            color: #fda72b;
                        }
                        /* 未选中的切换块样式 */
                        .switch-block-no{
                            font-size: 0.2rem;
                            color:#ceced5;
                            background: none !important;
                        }
                    }
                }
                .explain{
                    width: 0.225rem;
                    height: 0.225rem;
                    vertical-align: middle;
                    margin-left: 0.1rem;
                    cursor: pointer;
                }
                /* 主体内容公共样式——结束 */
                .left-content-row{
                    display: flex;
                    flex-direction: column;
                    width: 7.15rem;
                    /* 十四运建设 */
                    .construction{
                        height: 3.975rem;
                        margin-top: 0.125rem;
                        .top-light-img{
                            left: calc(50% - 3.5rem);
                            width: 7rem;
                            height: 0.9625rem;
                            background: url(../../assets/img/cityManage/light1.png) no-repeat;
                            background-size: 100% 100%;
                        }
                        .block-title-name{
                            color: #00f9ef;
                            line-height: 0.7rem;
                            padding-left: 0.35rem;
                        }
                        .con-switch-block{
                            position: relative;
                            height: 0.5625rem;
                            border-bottom: 1px solid #18397b;
                            line-height: 0.575rem;
                            display: flex;
                            .con-switch-left{
                                width: 3.9625rem;
                                height: 0.55rem;
                                background: url(../../assets/img/cityManage/con-switch-left.png) no-repeat;
                                background-size: 100% 100%;
                                padding-left: 0.35rem;
                                cursor: pointer;
                            }
                            .con-switch-right{
                                position: absolute;
                                top: 0;
                                right: 0;
                                width: 3.9625rem;
                                height: 0.55rem;
                                background: url(../../assets/img/cityManage/con-switch-right.png) no-repeat;
                                background-size: 100% 100%;
                                text-align: center;
                                cursor: pointer;
                            }
                        }
                        .con-chart-box{
                            position: relative;
                            flex: 1;
                            margin: 0.25rem 0.25rem 0.25rem 0.35rem;
                            .completion-status{
                                position: absolute;
                                left: 0;
                                top: 0;
                                font-size: 0.2rem;
                                display: flex;
                                li:first-of-type{
                                    color: #fda72b;
                                }
                                li:last-of-type{
                                    color:#ceced5;
                                    padding-left: 0.35rem;
                                }
                                .line-space{
                                    margin: 0 0.05rem;
                                }
                            }
                            #conChart{
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }
                    /* 拆违、整治 */
                    .rectification{
                        display: flex;
                        flex-direction: row;
                        height: 3.7375rem; // 299px
                        margin-top: 0.125rem;
                        /* 拆违 */
                        .non-conforming{
                            width: 2.375rem;
                            .top-light-img{
                                left: calc(50% - 1.1875rem);
                                width: 2.3625rem;
                                height: 0.9625rem;
                                background: url(../../assets/img/cityManage/light2.png) no-repeat;
                                background-size: 100% 100%;
                            }
                            .block-title-name{
                                position: relative;
                                line-height: 0.55rem;
                                .non-switch-left{
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    width: 1.325rem;
                                    height: 0.55rem;
                                    background: url(../../assets/img/cityManage/non-switch-left.png) no-repeat;
                                    background-size: 100% 100%;
                                    padding-left: 0.25rem;
                                    border-bottom: 1px solid #18397b;
                                    cursor: pointer;
                                    z-index: 10;
                                }
                                .non-switch-right{
                                    position: absolute;
                                    top: 0;
                                    right: 0;
                                    width: 1.325rem;
                                    height: 0.55rem;
                                    background: url(../../assets/img/cityManage/non-switch-right.png) no-repeat;
                                    background-size: 100% 100%;
                                    text-align: center;
                                    padding-left: 0.25rem;
                                    border-bottom: 1px solid #102154;
                                    cursor: pointer;
                                }
                            }
                            .non-chart-box{
                                display: flex;
                                flex-direction: column;
                                height: 2.875rem;
                                ul{
                                    padding: 0.25rem;
                                    li{
                                        height: 0.375rem;
                                        line-height: 0.375rem;
                                        font-size: 0.1875rem;
                                        color:#ceced5;
                                        white-space: nowrap;
                                        span{
                                            color: #ccb135;
                                        }
                                    }
                                }
                                #nonChart{
                                    height: 1.625rem
                                }
                            }
                        }
                        /* 整治 */
                        .renovation{
                            width: 4.65rem;
                            margin-left: 0.125rem;
                            .top-light-img{
                                left: calc(50% - 2.3125rem);
                                width: 4.6125rem;
                                height: 0.9625rem;
                                background: url(../../assets/img/cityManage/light3.png) no-repeat;
                                background-size: 100% 100%;
                            }
                            .block-title-name{
                                color:#aa61c2;
                                line-height: 0.7rem;
                                padding-left: 0.2rem;
                            }
                            .completion-rate{
                                display: flex;
                                padding: 0.175rem 0.2rem;
                                li{
                                    flex: 1;
                                    font-size: 0.2rem;
                                    white-space: nowrap;
                                }
                                li:first-of-type{
                                    color: #9897ac;
                                }
                                li:last-of-type{
                                    color:#ceced5;
                                    padding-left: 0.1rem;
                                }
                                .line-space{
                                    margin: 0 0.05rem;
                                }
                            }
                            #renChart{
                                flex: 1;
                            }
                        }
                    }
                    /* 管理工作列表 */
                    .work-list{
                        height: 3.4125rem;
                        margin-top: 0.125rem;
                        .top-light-img{
                            left: calc(50% - 3.5rem);
                            width: 7rem;
                            height: 0.9625rem;
                            background: url(../../assets/img/cityManage/light1.png) no-repeat;
                            background-size: 100% 100%;
                        }
                        .block-title-name{
                            color:#77cc34;
                            line-height: 0.7rem;
                            padding-left: 0.35rem;
                        }
                        .table-head{
                            color:#77cc34;
                            height: 0.575rem;
                            line-height: 0.575rem;
                            tr{
                                height: 0.575rem;
                                line-height: 0.575rem;
                            }
                        }
                        .table-body{
                            height: 2.1rem;
                            color: #fff;
                            overflow: hidden;
                            tr{
                                height: 0.525rem;
                                line-height: 0.525rem;
                            }
                        }
                        .table-head,.table-body{
                            font-size: 0.2rem;
                            text-align: center;
                            table{
                                border-collapse: collapse;
                                tr {
                                    td{
                                        font-weight: normal !important;
                                        border-bottom: 1px solid #18397b;
                                    }
                                    td:nth-of-type(1){
                                        width: 2.5rem;
                                    }
                                    td:nth-of-type(2){
                                        width: 0.875rem;
                                    }
                                    td:nth-of-type(3){
                                        width: 1.6875rem;
                                    }
                                    td:nth-of-type(4){
                                        width: 1.025rem;
                                    }
                                    td:nth-of-type(5){
                                        width: 1.0375rem;
                                    }
                                }
                            }
                        }
                    }
                }
                .center-content-row{
                    display: flex;
                    flex-direction: column;
                    width: 8.875rem;
                    margin: 0 0.125rem;
                    .chart-name {
                        line-height: 0.5625rem;
                        font-size: 0.2rem;
                        color: #58c8fe;
                        text-align: center;
                    }
                    // 设置圆角样式
                    .border-box{
                        position: relative;
                        border-radius: 0.15rem;
                        // z-index: 10;
                        &::before {
                            position: absolute;
                            top: -2px;
                            left: -2px;
                            width: 0.2rem;
                            height: 0.2rem;
                            border-top: 4px solid #6ce8fa;
                            border-left: 4px solid #6ce8fa;
                            border-top-left-radius: 0.15rem;
                            content: "";
                            z-index: 100;
                        }
                        &::after {
                            position: absolute;
                            top: -2px;
                            right: -2px;
                            width: 0.2rem;
                            height: 0.2rem;
                            border-right: 4px solid #6ce8fa;
                            border-top: 4px solid #6ce8fa;
                            border-top-right-radius: 0.15rem;
                            content: "";
                            z-index: 100;
                        }
                        .panel-footer{
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            width: 100%;
                            &::before {
                                position: absolute;
                                left: -2px;
                                bottom: -2px;
                                width: 0.2rem;
                                height: 0.2rem;
                                border-left: 4px solid #6ce8fa;
                                border-bottom: 4px solid #6ce8fa;
                                border-bottom-left-radius: 0.15rem;
                                content: "";
                            }
                            &::after {
                                position: absolute;
                                bottom: -2px;
                                right: -2px;
                                width: 0.2rem;
                                height: 0.2rem;
                                border-right: 4px solid #6ce8fa;
                                border-bottom: 4px solid #6ce8fa;
                                border-bottom-right-radius: 0.15rem;
                                content: "";
                            }
                        }
                    }
                    /* 指数统计 */
                    .index-statistics{
                        position: relative;
                        height: 4.125rem; // 330px
                        .top-light-img{
                            left: calc(50% - 3.675rem);
                            top: -1.8125rem;
                            width: 7.35rem;
                            height: 3.8875rem;
                            background: url(../../assets/img/cityManage/light4.png) no-repeat;
                            background-size: 100% 100%;
                        }
                        .overflow-box{
                            padding: 0.375rem 0.3125rem 0 0.3125rem;
                        }
                        .total-area {
                            display: flex;
                            flex-direction: row;
                            z-index: 100;
                            .core-area{
                                justify-content: center;
                                border-left: 1px solid #144196;
                            }
                            &>li{
                                display: flex;
                                flex-direction: row;
                                flex: 1;
                                color: #fff;
                                font-size: 0.225rem; // 18px
                                .area-name {
                                    line-height: 0.6rem;
                                    margin-right: 0.125rem;
                                    cursor: pointer;
                                }
                                #areaNumber .number-item{
                                    background: #fe6923 !important;
                                    border: 1px solid #fe6923 !important;
                                }
                                .area-number {
                                    position: relative;
                                    font-size: 0.375rem; // 30px
                                    text-align: center;
                                    color: #fff;
                                    writing-mode: vertical-lr;
                                    text-orientation: upright;
                                    /*文字禁止编辑*/
                                    -moz-user-select: none; /*火狐*/
                                    -webkit-user-select: none; /*webkit浏览器*/
                                    -ms-user-select: none; /*IE10*/
                                    -khtml-user-select: none; /*早期浏览器*/
                                    user-select: none;
                                    cursor: pointer;
                                    /*滚动数字设置*/
                                    .number-item {
                                        width: 0.375rem;
                                        height: 0.5rem;
                                        list-style: none;
                                        margin-right: 0.125rem;
                                        background: #ffa529;
                                        border-radius: 0.05rem;
                                        border: 1px solid #ffa529;
                                        & > span {
                                            position: relative;
                                            display: inline-block;
                                            margin-right: 0.075rem;
                                            width: 100%;
                                            height: 100%;
                                            writing-mode: vertical-rl;
                                            text-orientation: upright;
                                            overflow: hidden;
                                            & > i {
                                                font-style: normal;
                                                position: absolute;
                                                top: 0.025rem;
                                                left: 50%;
                                                transform: translate(-50%, 0);
                                                transition: transform 1s ease-in-out;
                                                letter-spacing: 0.125rem;
                                            }
                                        }
                                    }
                                }
                                .area-unit {
                                    display: flex;
                                    flex-direction: column;
                                    justify-content: center;
                                }
                            }

                        }
                        .chart-area {
                            flex: 1;
                            #myTotalArea {
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }
                    /* 占比统计 */
                    .proportion-statistics{
                        position: relative;
                        height: 4.275rem; // 342px
                        margin-top: 0.125rem;
                        .top-light-img{
                            left: calc(50% - 3.65rem);
                            top: -0.975rem;
                            width: 7.35rem;
                            height: 0.975rem;
                            background: url(../../assets/img/cityManage/light6.png) no-repeat;
                            background-size: 100% 100%;
                        }
                        .overflow-box{
                            padding-top: 0.125rem; // 10px
                            .prop-switch-block{
                                position: relative;
                                height: 0.5625rem;
                                border-top: 1px solid #18397b;
                                border-bottom: 1px solid #18397b;
                                line-height: 0.575rem;
                                .prop-switch-left{
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    width: 3.375rem;
                                    height: 0.55rem;
                                    cursor: pointer;
                                    text-align: center;
                                }
                                .prop-switch-center{
                                    position: absolute;
                                    top: 0;
                                    left: 2.825rem;
                                    width: 3.3625rem;
                                    height: 0.55rem;
                                    cursor: pointer;
                                    text-align: center;
                                }
                                .prop-switch-right{
                                    position: absolute;
                                    top: 0;
                                    right: 0;
                                    width: 3.175rem;
                                    height: 0.55rem;
                                    cursor: pointer;
                                    text-align: right;
                                    padding-right: 0.3125rem;
                                }
                                .prop-switch-active{
                                    font-size: 0.2325rem;
                                    color: #fda72b;
                                }
                                .prop-switch-no{
                                    font-size: 0.2rem;
                                    color:#ceced5;
                                }
                                /* 选中的切换块样式 */
                                .prop-switch-left.prop-switch-active{
                                    background: url(../../assets/img/cityManage/prop-switch-left.png) no-repeat;
                                    background-size: 100% 100%;
                                }
                                .prop-switch-center.prop-switch-active{
                                    background: url(../../assets/img/cityManage/prop-switch-center.png) no-repeat;
                                    background-size: 100% 100%;
                                }
                                .prop-switch-right.prop-switch-active{
                                    background: url(../../assets/img/cityManage/prop-switch-right.png) no-repeat;
                                    background-size: 100% 100%;
                                }
                                /* 未选中的切换块样式 */
                                .prop-switch-left.prop-switch-no{
                                    background: url(../../assets/img/cityManage/prop-switch-left-py.png) no-repeat;
                                    background-size: 100% 100%;
                                }
                                .prop-switch-center.prop-switch-no{
                                    background: url(../../assets/img/cityManage/prop-switch-center-py.png) no-repeat;
                                    background-size: 100% 100%;
                                }
                                .prop-switch-right.prop-switch-no{
                                    background: url(../../assets/img/cityManage/prop-switch-right-py.png) no-repeat;
                                    background-size: 100% 100%;
                                }
                            }
                            .length-proportion{
                                height: 2.9875rem; // 239px
                                padding-top: 0.1875rem;
                                #lengthProportion{
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                        }

                    }
                    /* 网格数量 */
                    .grid-number{
                        position: relative;
                        height: 2.825rem; // 226px
                        margin-top: 0.125rem;
                        .top-light-img{
                            left: calc(50% - 3.65rem);
                            top: -0.975rem;
                            width: 7.35rem;
                            height: 0.975rem;
                            background: url(../../assets/img/cityManage/light6.png) no-repeat;
                            background-size: 100% 100%;
                        }
                        .overflow-box{
                            position: relative;
                            padding-top: 0.275rem;
                            .grid-switch-block{
                                position: relative;
                                height: 0.5625rem;
                                border-top: 1px solid #18397b;
                                border-bottom: 1px solid #18397b;
                                line-height: 0.575rem;
                                .grid-switch-left{
                                    width: 4.725rem;
                                    height: 0.55rem;
                                    background: url(../../assets/img/cityManage/grid-switch-left.png) no-repeat;
                                    background-size: 100% 100%;
                                    padding-left: 0.5rem;
                                    cursor: pointer;
                                }
                                .grid-switch-right{
                                    position: absolute;
                                    top: 0;
                                    right: 0;
                                    width: 4.525rem;
                                    height: 0.55rem;
                                    background: url(../../assets/img/cityManage/grid-switch-right.png) no-repeat;
                                    background-size: 100% 100%;
                                    text-align: center;
                                    padding-left: 0.5rem;
                                    cursor: pointer;
                                }

                            }
                            .grid-proportion{
                                display: flex;
                                flex-direction: row;
                                height: 1.9625rem; // 157px
                                #gridChart{
                                    width: 6.35rem; // 508px
                                    height: 100%;
                                }
                                .other-statistics{
                                    display: flex;
                                    flex-direction: column;
                                    width: 2.5rem;
                                    border-left: 1px solid #18397b;
                                    padding: 0 0.0625rem;
                                    li{
                                        flex: 1;
                                        font-size: 0.175rem;
                                        color: #ffc642;
                                        text-align: center;
                                        line-height: 0.375rem;
                                        .space{
                                            padding: 0 0.125rem;
                                        }
                                    }
                                    li + li {
                                        border-top: 1px solid #18397b;
                                    }
                                }
                            }
                        }
                    }
                    .top-border-block{
                        position: absolute;
                        left: calc(50% - 0.9rem);
                        top: -0.0375rem;
                        width: 1.8125rem;
                        height: 0.175rem;
                        background: url(../../assets/img/cityManage/border-block.png) no-repeat;
                        background-size: 100% 100%;
                    }
                    .bottom-light-img{
                        position: absolute;
                        left: calc(50% - 2.4125rem);
                        bottom: -0.4125rem;
                        width: 4.825rem;
                        height: 0.8375rem;
                        background: url(../../assets/img/cityManage/light5.png) no-repeat;
                        background-size: 100% 100%;
                        z-index: 99;
                    }
                }
                .right-content-row{
                    display: flex;
                    flex-direction: column;
                    width: 7.15rem;
                    /* 其他指标统计 */
                    .other-indicator{
                        height: 1.5rem;
                        margin-top: 0.125rem;
                        position: relative;
                        .bottom-light-img{
                            position: absolute;
                            left: calc(50% - 3.65rem);
                            bottom: 0;
                            width: 7.3125rem;
                            height: 0.975rem;
                            background: url(../../assets/img/cityManage/light6.png) no-repeat;
                            background-size: 100% 100%;
                        }
                        .overflow-box{
                            display: flex;
                            flex-direction: row;
                            height: 1.5rem;
                            padding: 0.2rem 0.25rem;
                            li {
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                                white-space: nowrap;
                                text-align: center;
                                .strength,.density,.days {
                                    font-size: 0.3825rem;
                                    span{
                                        font-size: 0.2rem;
                                    }
                                }
                                p {
                                    font-size: 0.2rem;
                                    color: #fff;
                                    line-height: 0.425rem;
                                }
                            }
                            li:first-of-type{
                                width: 1.75rem;
                                padding-right: 0.225rem;
                                span{
                                    color: #ffa529;
                                }
                            }
                            li:nth-of-type(2){
                                width: 2.725rem;
                                padding: 0 0.225rem;
                                border-left: 1px solid #18397b;
                                border-right: 1px solid #18397b;
                                span{
                                    color: #f65352;
                                }
                            }
                            li:last-of-type{
                                width: 2.125rem;
                                padding-left: 0.225rem;
                                span{
                                    color: #0592fa;
                                }
                            }
                        }
                    }
                    /* 各项指标列表 */
                    .indicator-list{
                        height: 5.5rem; // 440px
                        margin-top: 0.125rem;
                        .overflow-box{
                            table{
                                font-size: 0.2rem;
                                text-align: center;
                                border-collapse: collapse;
                                thead tr {
                                    height: 0.625rem; // 50px
                                    line-height: 0.625rem;
                                    th{
                                        color: #00f9ef;
                                        font-weight: normal !important;
                                        border-bottom: 1px solid #18397b;
                                    }
                                    th:nth-of-type(1){
                                        width: 0.9625rem;
                                    }
                                    th:nth-of-type(2){
                                        width: 1.125rem;
                                    }
                                    th:nth-of-type(3){
                                        width: 3.35rem;
                                    }
                                    th:nth-of-type(4){
                                        width: 1.6875rem;
                                    }
                                }
                                tbody{
                                    tr{
                                        height: 0.525rem !important;
                                        line-height: 0.525rem !important;
                                        white-space: nowrap;
                                        .icon-td{
                                            position: relative;
                                            border-right: 1px solid #18397b;
                                            border-bottom: 1px solid #18397b;
                                        }
                                        td{
                                            border-bottom: 1px solid #18397b; // 未显示
                                        }
                                    }
                                    .green{
                                        color: #77cc34;
                                        img{
                                            position: absolute;
                                            left: 0.3375rem;
                                            top: 0.375rem;
                                            width: 0.3375rem;
                                            height: 0.3375rem;
                                        }
                                    }
                                    .yellow{
                                        color: #fdd400;
                                        &:last-of-type{
                                            border-bottom: 1px solid #18397b; // 未显示
                                        }
                                        img{
                                            position: absolute;
                                            left: 0.3375rem;
                                            top: 0.875rem;
                                            width: 0.3375rem;
                                            height: 0.35rem;
                                        }
                                    }
                                    .peach{
                                        color: #f381fb;
                                        &:last-of-type{
                                            border-bottom: 1px solid #18397b; // 未显示
                                        }
                                        img{
                                            position: absolute;
                                            left: 0.3375rem;
                                            top: 0.1rem;
                                            width: 0.3375rem;
                                            height: 0.3375rem;
                                        }
                                    }
                                    .blue{
                                        color: #00abff;
                                        &:last-of-type{
                                            border-bottom: 1px solid #18397b; // 未显示
                                        }
                                        img{
                                            position: absolute;
                                            left: 0.3375rem;
                                            top: 0.1125rem;
                                            width: 0.3rem;
                                            height: 0.2875rem;
                                        }
                                    }
                                    .red{
                                        color: #f65352;
                                        .icon-td{
                                            border-bottom: none !important;
                                            img{
                                                position: absolute;
                                                left: 0.3375rem;
                                                top: 0.125rem;
                                                width: 0.3rem;
                                                height: 0.325rem;
                                            }
                                        }
                                        td{
                                            border-bottom: none !important;
                                        }
                                    }
                                }
                            }
                        }
                    }
                    /* 历史案件及结案率柱状图 */
                    .case-bar{
                        height: 4.125rem;
                        margin-top: 0.125rem;
                        .overflow-box{
                            .case-top-num{
                                display: flex;
                                flex-direction: row;
                                height: 1.075rem;
                                border-bottom: 1px solid #18397b;
                                padding: 0.2rem 0.125rem 0.1875rem 0.3125rem;
                                .today-case{
                                    display: flex;
                                    flex-direction: row;
                                    align-items: center;
                                    width: 2.5rem;
                                    .case-name{
                                        font-size: 0.2325rem;
                                        color: #d6d6db;
                                    }
                                    .case-num{
                                        font-size: 0.3825rem;
                                        color: #f76009;
                                    }
                                    .case-unit{
                                        font-size: 0.2325rem;
                                        color: #f76009;
                                        margin-left: 0.125rem;
                                    }
                                }
                                .closed-case{
                                    flex: 1;
                                    border-left: 1px solid #18397b;
                                    padding: 0 0.125rem 0 0.375rem;
                                    .closing-rate{
                                        .case-name{
                                            font-size: 0.2325rem;
                                            color: #d6d6db;
                                        }
                                        .case-num{
                                            font-size: 0.3825rem;
                                            color: #77cc34;
                                        }
                                        .case-unit{
                                            font-size: 0.2325rem;
                                            color: #77cc34;
                                        }
                                        .last-date{
                                            color: #fff;
                                            font-size: 0.15rem;
                                            padding-left: 0.5rem;
                                        }
                                    }
                                    p{
                                        font-size: 0.1625rem;
                                        color: #d6d6db;
                                        line-height: 0.325rem;
                                        span{
                                            color: #77cc34;
                                        }
                                        .space{
                                            padding: 0 0.25rem;
                                        }
                                    }
                                }
                            }
                            #caseChart{
                                height: 2.9rem;
                            }
                            .chart-name{
                                position: absolute;
                                bottom: 10px;
                                left: 2.75rem;
                                line-height: 0.375rem;
                                font-size: 0.2rem;
                                color: #58c8fe;
                                text-align: center;
                            }
                        }
                    }
                    .top-light-img{
                        left: calc(50% - 3.5rem);
                        width: 7rem;
                        height: 0.9625rem;
                        background: url(../../assets/img/cityManage/light1.png) no-repeat;
                        background-size: 100% 100%;
                    }
                }
            }
        }

    }
</style>
